<template>
  <li class="newsong">
    <div class="action" v-if="go">
      <span :class="{ goo: playingStatus }"></span>
      <span :class="{ goo: playingStatus }"></span>
      <span :class="{ goo: playingStatus }"></span>
    </div>
    <div
      class="text"
      @click="$emit('play-song', thissong[0])"
      :class="{ toaction: go }"
    >
      <h3>
        {{ item.name
        }}<span :class="{ toaction: go }">
          -
          <span
            class="name"
            :class="{ toaction: go }"
            v-for="singer in singers"
            :key="singer.id"
          >
            {{ singer.name }}
          </span>
        </span>
        <span :class="{ toaction: go }">{{
          item.song
            ? item.song.album.name
            : item.al
            ? item.al.name
            : item.album.name
        }}</span>
      </h3>
      <!-- <div class="msg"></div> -->
    </div>
    <div class="del" @click="todel"></div>
  </li>
</template>

<script>
export default {
  name: "Newsong",
  props: ["item", "playingStatus", "selectedSong"],
  data: function () {
    return {
      thissong: {},
    };
  },
  computed: {
    go() {
      return this.selectedSong == this.item.id ? true : false;
    },
    singers() {
      return this.item.song
        ? this.item.song.artists
        : this.item.ar
        ? this.item.ar
        : this.item.artists;
    },
  },
  created: function () {
    this.axios
      .get(`https://apis.netstart.cn/music/song/detail?ids=${this.item.id}`)
      .then((res) => {
        this.thissong = res.data.songs;
      });
  },
  methods: {
    todel() {
      this.$emit("to-del", this.item.id);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/item.less";
@keyframes action {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
.newsong {
  padding: 6px 0;
  margin-left: 10px;
  // border-bottom: 1px solid #dfdfdf;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  .text {
    flex: 1;
    // width: 50vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    &.toaction {
      color: @red;
    }
  }
  h3 {
    font-size: 14px;
    width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    span {
      color: #888888;
      font-size: 12px;
      transform: scale(0.8);
      &.toaction {
        color: @red;
      }
      .name {
        &.toaction {
          color: @red;
        }
        &::after {
          content: "/";
        }
        &:last-of-type {
          &::after {
            content: " - ";
          }
        }
      }
    }
  }
  // .msg {
  //   width: 200px;
  //   white-space: nowrap;
  //   overflow: hidden;
  //   text-overflow: ellipsis;
  // }
  .del {
    width: 15px;
    height: 15px;
    background-image: url("../assets/c7z.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    align-self: center;
    margin-right: 10px;
  }
  .action {
    width: 10px;
    height: 10px;
    display: flex;
    align-self: center;
    margin-right: 10px;
    justify-content: space-between;
    span {
      width: 10%;
      height: 100%;
      background-color: @red;
      transform-origin: bottom;
      animation: action 0.6s linear alternate infinite;
      animation-play-state: paused;
      &:nth-child(1) {
        animation-delay: -3s;
      }
      &:nth-child(3) {
        animation-delay: -3s;
      }
      &.goo {
        animation-play-state: running;
      }
    }
  }
}
</style>